<template>
  <div class="container">
    <template v-if="!getCustomerId">
      <get-user-info v-if="isGetUserInfo" @authPhoneInfo="authPhoneInfo"></get-user-info>
      <get-phone-info v-if="isGetPhoneInfo"></get-phone-info>
    </template>
    <template v-if="getCustomerId && !getPhone">
      <get-phone-info v-if="isGetPhoneInfo"></get-phone-info>
    </template>
    <div class="banner">
      <img v-if="fileSpace" mode="aspectFit" class="banner__img" :src="fileSpace + '/images/coupon-center.png'" alt="">
    </div>
    <div class="main">
      <div class="list">
        <div v-for="(item, index) in dataList" :key="index" class="mar-b-15">
          <coupon v-if="item" :coupon="item" :messageIds="messageIds" :showExpend="false" :actionId="item.actionId" @click="linkCoupon"></coupon>
        </div>
      </div>
    </div>
    <div class="pad-10 mar-t-10 align-c" v-if="nodata">
      <img v-if="fileSpace" mode="widthFix" class="width-153 height-75 mar-t-30"
            :src="fileSpace + '/images/2-0-kong.png'"/>
      <div class="pad-t-20 font-14 font-gray">空空如也</div>
    </div>
    <div @click="goGetUserInfo" v-if="!getCustomerId || !getPhone" style="background:rgba(255,255,255,0);width:100%;height:100%;position:fixed;top:0;left:0;z-index:1001;">
    </div>
  </div>
</template>
<script>
import GetUserInfo from '@/components/GetUserInfo'
import GetPhoneInfo from '@/components/GetPhoneInfo'
import Coupon from '@/components/Coupon'
import { couponCenter, doReceive } from '@/api/personal'
import { listEnterpriseMessageConfig } from '@/api/common'
export default {
  components: { Coupon, GetUserInfo, GetPhoneInfo },
  data() {
    return {
      expend: true,
      params: {
        memberId: '',
        customerMemberId: '',
        size: 10,
        currentPage: 1
      },
      pullLoad: {
        finished: false
      },
      dataList: [],
      nodata: false,
      doReceiveParams: {
        couponId: '',
        customerMemberId: '',
        actionId: ''
      },
      messageIds: [],
      isGetUserInfo: false,
      isGetPhoneInfo: false
    }
  },
  onLoad() {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
  },
  mounted() {
    this.params.memberId = this.getMemberId
    this.params.customerMemberId = this.getCustomerId
    this.couponCenter()
  },
  onPullDownRefresh() {
    // 下拉刷新
    this.$pt.pageScrollTo({
      scrollTop: 0,
      duration: 0
    })
    this.params.currentPage = 1
    this.dataList = []
    this.pullLoad.finished = false
    this.nodata = false
    this.couponCenter()
    setTimeout(() => {
      this.$pt.stopPullDownRefresh()
    }, 500)
  },
  onReachBottom() {
    // 触底刷新
    if (!this.pullLoad.finished) {
      this.couponCenter()
    }
  },
  methods: {
    goGetUserInfo() {
      if (!this.getCustomerId) {
        this.isGetUserInfo = true
      } else if (!this.getPhone) {
        this.isGetPhoneInfo = true
      }
    },
    messageConfig() {
      this.messageIds = []
      const dataArr = ['1401', '1402']
      let dataStr = dataArr.toString()
      listEnterpriseMessageConfig({
        memberId: this.getMemberId,
        ascriptionTypes: dataStr
      }).then((response) => {
        if (response.isError) return
        response.data.forEach(item => {
          if (item.miniMadeId) {
            this.messageIds.push(item.miniMadeId)
          }
        })
      }).catch(() => {
      })
    },
    linkCoupon(item) {
      if (!this.getShowBuyCard) return
      this.$pt.navigateTo({url: '/pages/personal/coupon/suit-goods/main?couponId=' + item.couponId + '&actionId=' + item.actionId})
    },
    couponCenter() {
      this.messageConfig()
      // 领券中心分页请求
      couponCenter(this.params).then(response => {
        if (response.isError) return
        response.data.records.forEach(item => {
          if (item.validTimeType === 1) {
            item.validStartTime = item.validStartTime.split(' ')[0]
            item.validEndTime = this.isToday(item.validEndTime)
          }
          if (item.cashAmount) {
            item.priceLength = item.cashAmount.toString().length
            // item.cashAmount = parseFloat(item.cashAmount)
          }
          if (item.reduceAmount) {
            item.priceLength = item.reduceAmount.toString().length
            // item.reduceAmount = parseFloat(item.reduceAmount)
          }
          if (item.discountPercent) item.discountPercent = parseFloat(item.discountPercent)
          item.expend = false
          this.dataList.push(item)
        })
        if (response.data.total === 0) {
          // 如果总数据长度为0 则显示暂无数据
          this.nodata = true
        }
        this.params.currentPage++
        if (this.dataList.length === 0 || this.dataList.length >= response.data.total) {
          // 判断数据是否全部加载结束
          this.pullLoad.finished = true
        }
      }).catch(() => {
      })
    },
    doReceive(value) {
      // 领取优惠券
      this.doReceiveParams.couponId = value.couponId
      this.doReceiveParams.customerMemberId = this.getCustomerId
      this.doReceiveParams.actionId = value.actionId || ''
      doReceive(this.doReceiveParams).then(response => {
        if (response.isError) return
        if (response.data.availableNum === 0 || !response.data.availableNum) {
          this.$utils.showToast({title: '领取成功'})
          value.receiveStatus = 1
          let dataclone = this.$utils.deepClone(this.dataList)
          this.dataList = dataclone
        } else {
          this.$utils.showToast({title: `领取成功!此券还可领${response.data.availableNum}张`})
        }
      }).catch(() => {
      })
    },
    isToday(date) {
      let today = new Date().toLocaleDateString()
      let tsDate = date.split(' ')[0].replace(/-/g, '/')
      if (new Date(tsDate).getTime() === new Date(today).getTime()) return 'today'
      return date.split(' ')[0]
    },
    // 头像昵称 授权后 立即跳出手机号授权
    authPhoneInfo() {
      this.isGetPhoneInfo = true
    }
  }
}
</script>
<style lang="less" scoped>
@light-orange: #FF593E;
@drak-orange: #EC3B1F;
.container{
  .banner{
    &__img{
      width: 375px;
      height: 124px;
    }
  }
  .main{
   .list{
      padding: 15px 15px 0;
   } 
  }
}
</style>
